﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="~/Layui/layui-v2.2.3/layui/css/layui.css" rel="stylesheet" />
    <link href="~/Layui/layui-v2.2.3/layui/css/layui.mobile.css" rel="stylesheet" />
    <script src="~/Layui/layui-v2.2.3/layui/layui.js"></script>
    <script src="~/Layui/layui-v2.2.3/layui/layui.all.js"></script>
</head>
<body>
    <div class="demoTable">
        搜索序号：
        <div class="layui-inline">
            <input class="layui-input" name="id" id="demoReload" autocomplete="off">
        </div>
        <button class="layui-btn" data-type="reload">搜索</button>
    </div>

    <table class="layui-hide" id="demo" lay-filter="user"></table>


    <script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
    <script>
layui.use('table', function(){
  var table = layui.table;

  //方法级渲染
  table.render({
    elem: '#demo'
    ,cols: [[
      {checkbox: true, fixed: true}
      ,{field:'id', title: '序号', width:80, sort: true, fixed: true}
      , { field: 'Tissue', title: '组织名称', sort: true, width: 120 }
      , { field: 'Branch', title: '部门名称', width: 120, sort: true }
      , { field: 'Year', title: '年', sort: true, width: 80 }
      , { field: 'Month', title: '月', sort: true, width: 80 }
      , { field: 'Crew', title: '人员', sort: true, width: 80 }
      , { field: 'SalesTarget', title: '销售目标', sort: true, width: 135 }
    ]]

      , data: [{
          "id": "10001"
      , "Tissue": "北部战区/北京分公司/北京"
      , "Branch": "办公室"
      , "Year": "2017年"
      , "Month": "1月"
      , "Crew": "翠花"
      , "SalesTarget": "8千万"
      }, {
          "id": "10002"
      , "Tissue": "北部战区/北京分公司/北京"
      , "Branch": "办公室"
      , "Year": "2017年"
      , "Month": "2月"
      , "Crew": "张三"
      , "SalesTarget": "1千万"
      }, {
          "id": "10003"
      , "Tissue": "北部战区/北京分公司/北京"
      , "Branch": "办公室"
      , "Year": "2017年"
      , "Month": "3月"
      , "Crew": "翠花"
      , "SalesTarget": "8千万"
      }, {
          "id": "10004"
      , "Tissue": "北部战区/北京分公司/北京"
      , "Branch": "办公室"
      , "Year": "2017年"
      , "Month": "1月"
      , "Crew": "战三"
      , "SalesTarget": "8万"
      }, {
          "id": "10005"
      , "Tissue": "北部战区/北京分公司/北京"
      , "Branch": "办公室"
      , "Year": "2017年"
      , "Month": "1月"
      , "Crew": "翠花"
      , "SalesTarget": "12万"
      }, {
          "id": "10006"
      , "Tissue": "北部战区/北京分公司/北京"
      , "Branch": "办公室"
      , "Year": "2017年"
      , "Month": "12月"
      , "Crew": "翠花"
      , "SalesTarget": "800万"
      }, {
          "id": "10007"
      , "Tissue": "北部战区/北京分公司/北京"
      , "Branch": "办公室"
      , "Year": "2017年"
      , "Month": "11月"
      , "Crew": "秋菊"
      , "SalesTarget": "8千万"
      }, {
          "id": "10008"
      , "Tissue": "北部战区/北京分公司/北京"
      , "Branch": "办公室"
      , "Year": "2017年"
      , "Month": "5月"
      , "Crew": "秋菊"
      , "SalesTarget": "8千万"
      }, {
          "id": "10009"
      , "Tissue": "北部战区/北京分公司/北京"
      , "Branch": "办公室"
      , "Year": "2017年"
      , "Month": "1月"
      , "Crew": "秋菊"
      , "SalesTarget": "8百万"
      }, {
          "id": "100010"
      , "Tissue": "北部战区/北京分公司/北京"
      , "Branch": "办公室"
      , "Year": "2017年"
      , "Month": "10月"
      , "Crew": "翠花"
      , "SalesTarget": "8千万"
      }, {
          "id": "100011"
      , "Tissue": "北部战区/北京分公司/北京"
      , "Branch": "办公室"
      , "Year": "2017年"
      , "Month": "7月"
      , "Crew": "海"
      , "SalesTarget": "70万"
      }, {
          "id": "100012"
      , "Tissue": "北部战区/北京分公司/北京"
      , "Branch": "办公室"
      , "Year": "2017年"
      , "Month": "8月"
      , "Crew": "花"
      , "SalesTarget": "8万"
      }
      ]
      , skin: 'line' //表格风格
    , even: true
      //,page: true //是否显示分页
      //,limits: [5, 7, 10]
      , limit: 5 //每页默认显示的数量
    ,id: 'testReload'
    ,page: true
    ,height: 315
  });

  var $ = layui.$, active = {
    reload: function(){
      var demoReload = $('#demoReload');

      //执行重载
      table.reload('testReload', {
        page: {
          curr: 1 //重新从第 1 页开始
        }
        ,where: {
          key: {
            id: demoReload.val()
          }
        }
      });
    }
  };

  $('.demoTable .layui-btn').on('click', function(){
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
  });
});
    </script>
</body>
</html>
